<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>05_components_composing</title>
</head>
<body>
<div>
  <h2>Welcome A!</h2>
  <h2>Welcome B!</h2>
  <h2>Welcome C!</h2>
</div>
<hr>

<div id="example"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">
  /*
   1. 拆分组件: 拆分界面, 抽取组件
     * 单个标题组件: Welcome
     * 应用组件: App
   2. 分析确定传递数据和数据类型
     * Welcome: props.name  string
     * App: props.names    array
   */

  //定义内部标题组件
  class Welcome extends React.Component {
    render() {
      return <h2>Welcome {this.props.name}!</h2>;
    }
  }
  Welcome.propTypes = {
    name: React.PropTypes.string.isRequired
  };
  //定义外部应用组件
  class App extends React.Component {
    render() {
      return (
        <div>
          {
            this.props.names.map(
              (name, index) => <Welcome name={name} key={index}/>
            )
          }
        </div>
      );
    }
  }
  App.propTypes = {
    names: React.PropTypes.array.isRequired
  };

  /**********************************************************/

  var names = ['Tom', 'Jack', "Bob"];
  ReactDOM.render(<App names={names}/>, document.getElementById('example'));
</script>
</body>
</html>
